﻿

/**
* easyloader - jQuery EasyUI
* 
* Licensed under the GPL:
*   http://www.gnu.org/licenses/gpl.txt
*
* Copyright 2010 stworthy [ stworthy@gmail.com ] 
* 
*/
(function () {
    //将所有的插件，和插件资源和依赖文件放进modules对象中。
    var modules = {

        draggable: {
            js: 'jquery.draggable.js'
        },
        droppable: {
            js: 'jquery.droppable.js'
        },
        resizable: {
            js: 'jquery.resizable.js'
        },
        linkbutton: {
            js: 'jquery.linkbutton.js',
            css: 'linkbutton.css'
        },
        pagination: {
            js: 'jquery.pagination.js',
            css: 'pagination.css',
            dependencies: ['linkbutton']
        },
        datagrid: {
            js: 'jquery.datagrid.js',
            css: 'datagrid.css',
            dependencies: ['panel', 'resizable', 'linkbutton', 'pagination']
        },
        treegrid: {
            js: 'jquery.treegrid.js',
            css: 'tree.css',
            dependencies: ['datagrid']
        },
        panel: {
            js: 'jquery.panel.js',
            css: 'panel.css'
        },
        window: {
            js: 'jquery.window.js',
            css: 'window.css',
            dependencies: ['resizable', 'draggable', 'panel']
        },
        dialog: {
            js: 'jquery.dialog.js',
            css: 'dialog.css',
            dependencies: ['linkbutton', 'window']
        },
        messager: {
            js: 'jquery.messager.js',
            css: 'messager.css',
            dependencies: ['linkbutton', 'window']
        },
        layout: {
            js: 'jquery.layout.js',
            css: 'layout.css',
            dependencies: ['resizable', 'panel']
        },
        form: {
            js: 'jquery.form.js'
        },
        menu: {
            js: 'jquery.menu.js',
            css: 'menu.css'
        },
        tabs: {
            js: 'jquery.tabs.js',
            css: 'tabs.css',
            dependencies: ['panel', 'linkbutton']
        },
        splitbutton: {
            js: 'jquery.splitbutton.js',
            css: 'splitbutton.css',
            dependencies: ['linkbutton', 'menu']
        },
        menubutton: {
            js: 'jquery.menubutton.js',
            css: 'menubutton.css',
            dependencies: ['linkbutton', 'menu']
        },
        accordion: {
            js: 'jquery.accordion.js',
            css: 'accordion.css',
            dependencies: ['panel']
        },
        calendar: {
            js: 'jquery.calendar.js',
            css: 'calendar.css'
        },
        combo: {
            js: 'jquery.combo.js',
            css: 'combo.css',
            dependencies: ['panel', 'validatebox']
        },
        combobox: {
            js: 'jquery.combobox.js',
            css: 'combobox.css',
            dependencies: ['combo']
        },
        combotree: {
            js: 'jquery.combotree.js',
            dependencies: ['combo', 'tree']
        },
        combogrid: {
            js: 'jquery.combogrid.js',
            dependencies: ['combo', 'datagrid']
        },
        validatebox: {
            js: 'jquery.validatebox.js',
            css: 'validatebox.css'
        },
        numberbox: {
            js: 'jquery.numberbox.js',
            dependencies: ['validatebox']
        },
        spinner: {
            js: 'jquery.spinner.js',
            css: 'spinner.css',
            dependencies: ['validatebox']
        },
        numberspinner: {
            js: 'jquery.numberspinner.js',
            dependencies: ['spinner', 'numberbox']
        },
        timespinner: {
            js: 'jquery.timespinner.js',
            dependencies: ['spinner']
        },
        tree: {
            js: 'jquery.tree.js',
            css: 'tree.css',
            dependencies: ['draggable', 'droppable']
        },
        datebox: {
            js: 'jquery.datebox.js',
            css: 'datebox.css',
            dependencies: ['calendar', 'validatebox']
        },
        parser: {
            js: 'jquery.parser.js'
        }
    };
    //将国际化文件放入一个locales对象中
    var locales = {
        'af': 'easyui-lang-af.js',
        'bg': 'easyui-lang-bg.js',
        'ca': 'easyui-lang-ca.js',
        'cs': 'easyui-lang-cs.js',
        'da': 'easyui-lang-da.js',
        'de': 'easyui-lang-de.js',
        'en': 'easyui-lang-en.js',
        'fr': 'easyui-lang-fr.js',
        'nl': 'easyui-lang-nl.js',
        'zh_CN': 'easyui-lang-zh_CN.js',
        'zh_TW': 'easyui-lang-zh_TW.js'
    };

    //定义一个局部变量，做循环遍历时候，存放状态
    var queues = {};

    //加载js方法
    function loadJs(url, callback) {
        //标志变量，js是否加载并执行
        var done = false;
        var script = document.createElement('script'); //创建script dom
        script.type = 'text/javascript';
        script.language = 'javascript';
        script.src = url;
        script.onload = script.onreadystatechange = function () { //onload是firefox 浏览器事件，onreadystatechange,是ie的，为了兼容，两个都写上，这样写会导致内存泄露
            //script.readyState只是ie下有这个属性，如果这个值为undefined，说明是在firefox,就直接可以执行下面的代码了。反之为ie，需要对script.readyState
            //状态具体值进行判别，loaded和complete状态表示，脚本加载了并执行了。
            if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')) {
                done = true;

                script.onload = script.onreadystatechange = null; //释放内存，还会泄露。
                if (callback) {//加载后执行回调
                    callback.call(script);
                }
            }
        }
        //具体加载动作，上面的onload是注册事件，
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    //运行js ,看代码逻辑可知，运行js,只是在js执行后，将这个script删除而已，主要用来加载国际化文件
    function runJs(url, callback) {
        loadJs(url, function () {
            document.getElementsByTagName("head")[0].removeChild(this);
            if (callback) {
                callback();
            }
        });
    }

    //加载css没什么好说的
    function loadCss(url, callback) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.media = 'screen';
        link.href = url;
        document.getElementsByTagName('head')[0].appendChild(link);
        if (callback) {
            callback.call(link);
        }
    }
    //加载单一一个plugin,仔细研究module ,可以发现，pingin之间通过dependence,构造成了一颗依赖树，
    //这个方法，就是加载具体树中的一个节点
    function loadSingle(name, callback) {
        //把整个plugin的状态设置为loading
        queues[name] = 'loading';

        var module = modules[name];
        //把js状态设置为loading
        var jsStatus = 'loading';
        //如果允许css,并且plugin有css,则加载css,否则设置加载过了，其实是不加载
        var cssStatus = (easyloader.css && module['css']) ? 'loading' : 'loaded';
        //加载css,plugin 的css，如果是全称，就用全称，否则把简写换成全称，所以简写的css文件要放入到themes/type./文件下
        if (easyloader.css && module['css']) {
            if (/^http/i.test(module['css'])) {
                var url = module['css'];
            } else {
                var url = easyloader.base + 'themes/' + easyloader.theme + '/' + module['css'];
            }
            loadCss(url, function () {
                cssStatus = 'loaded';
                //js， css加载完，才调用回调
                if (jsStatus == 'loaded' && cssStatus == 'loaded') {
                    finish();
                }
            });
        }
        //加载js,全称用全称，简写补全。
        if (/^http/i.test(module['js'])) {
            var url = module['js'];
        } else {
            var url = easyloader.base + 'plugins/' + module['js'];
        }
        loadJs(url, function () {
            jsStatus = 'loaded';
            if (jsStatus == 'loaded' && cssStatus == 'loaded') {
                finish();
            }
        });
        //加载完调用的方法，改plugin状态
        function finish() {
            queues[name] = 'loaded';
            //调用正在加载的方法，其实已经加载完了，
            easyloader.onProgress(name);
            if (callback) {
                callback();
            }
        }
    }
    //加载主模块入口，
    function loadModule(name, callback) {
        //定义数组，最后是形成的是依赖插件列表，最独立的插件放在首位，name是末尾
        var mm = [];
        var doLoad = false;
        //name有两种，一种是string ,一种是string array,这样一次可以加载多个plugin,都是调用add方法进行添加
        if (typeof name == 'string') {
            add(name);
        } else {
            for (var i = 0; i < name.length; i++) {
                add(name[i]);
            }
        }

        function add(name) {
            //如果modules中没有这个plugin那退出
            if (!modules[name]) return;
            //如果有，查看它是否依赖其他plugin
            var d = modules[name]['dependencies'];
            //如果依赖，就加载依赖的plugin.同时在加载依赖的plugin的依赖。注意循环中调用了add,是递归
            if (d) {
                for (var i = 0; i < d.length; i++) {
                    add(d[i]);
                }
            }
            mm.push(name);
        }

        function finish() {
            if (callback) {
                callback();
            }
            //调用onLoad，传递name 为参数
            easyloader.onLoad(name);
        }
        //形成依赖树，不行还没有做实质性工作呢，那就是加载。打起精神来，最核心的代码就是以下的了
        //超时用
        var time = 0;
        //定义一个加载方法，定义后直接调用
        function loadMm() {
            //如果mm有长度，长度！=0,加载plugin,为0，即加载完毕，开始加载国际化文件。
            if (mm.length) {
                var m = mm[0]; // the first module
                if (!queues[m]) {//状态序列中没有这个plugin的信息，说明没有加载这个plug,调用laodSingle进行加载
                    doLoad = true;
                    loadSingle(m, function () {
                        mm.shift(); //加载完成后，将这个元素从数组去除，在继续加载，直到数组
                        loadMm();
                    });
                } else if (queues[m] == 'loaded') {//如果这个plugin已经加载，就不用加载，以为mm中可能有重复项
                    mm.shift();
                    loadMm();
                } else {
                    if (time < easyloader.timeout) {//超时时候，10秒钟调用一次loadMn().注意arguments.callee代表函数本身
                        time += 10;
                        setTimeout(arguments.callee, 10);
                    }
                }
            } else {
                if (easyloader.locale && doLoad == true && locales[easyloader.locale]) {
                    var url = easyloader.base + 'locale/' + locales[easyloader.locale];
                    runJs(url, function () {
                        finish();
                    });
                } else {
                    finish();
                }
            }
        }

        loadMm();
    }
    //	定义一个加载器，注意，是全局变量，没有var,
    easyloader = {
        modules: modules,
        locales: locales,

        base: '.', //该属性是为了加载js,记录文件夹路径的
        theme: 'default', //默认主题
        css: true,
        locale: null,
        timeout: 2000, //加载超时事件
        //easyloader.load()，该模块加载的调用方法,先加载css,然后加载js
        load: function (name, callback) {
            //如果加载是*.css文件，判断是不是以http开头，如果是，直接调用
            if (/\.css$/i.test(name)) {
                if (/^http/i.test(name)) {
                    loadCss(name, callback);
                } else {
                    //不是http的，加上base.文件夹路径
                    loadCss(easyloader.base + name, callback);
                }
            }
            //加载js文件
            else if (/\.js$/i.test(name)) {
                if (/^http/i.test(name)) {
                    loadJs(name, callback);
                } else {
                    loadJs(easyloader.base + name, callback);
                }
            } else {
                //如果直接传递一个插件名，就去modole数组中加载。改方法是重点，也是easyui自带的plugin加载方式
                loadModule(name, callback);
            }
        },

        onProgress: function (name) { },
        onLoad: function (name) { }
    };
    //以上一直在定义函数，和变量，此处为真正执行处
    //获取页面的所有的script,主要是为了获取我们现在解释的easyloader.js文件路径，来设置base属性
    var scripts = document.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        var src = scripts[i].src;
        if (!src) continue;
        var m = src.match(/easyloader\.js(\W|$)/i); //判断文件是否含有easyloadr.js
        if (m) {
            //如果有，base为easyloadr.js 的相同前缀
            easyloader.base = src.substring(0, m.index);
        }
    }
    //定义一个简化调用接口
    window.using = easyloader.load;

    if (window.jQuery) {
        jQuery(function () {
            //系统数据加载完后，加载parser.js插件，该插件是渲染界面的
            easyloader.load('parser', function () {
                jQuery.parser.parse(); //渲染方法
            });
        });
    }

})();
